<template>
  <div>
    <Row>
      <Col span="24">
        <Card class="margin-bottom-10">
          <Form inline>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.game_hash" filterable remote :remote-method="getGameName" :clearable="true" style="width:260px"
                      placeholder='请选择游戏' :loading="nameLoading">
                <Option v-for="(option, index) in gameNameOption" :value="option.value" :key="index">{{ option.label }}</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.open_id" :clearable="true" style="width:260px" placeholder="请输入OpenId" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.hero_id" filterable style="width:160px" :clearable="true" placeholder='请选择角色'>
                <!-- <Option :value="1001">驭剑者</Option> -->
                <Option :value="1002">剑影（狐狸）</Option>
                <Option :value="1004">炎刃（狼）</Option>
                <Option :value="1005">灵剑师（虎）</Option>
                <Option :value="1006">双弩游侠（猞猁）</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Input v-model="searchConf.keyword" :clearable="true" style="width:260px" placeholder="请输入标题或附件内容" />
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Select v-model="searchConf.status" filterable style="width:160px" :clearable="true" placeholder='请选择邮箱状态'>
                <Option :value="1">未收取</Option>
                <Option :value="2">已收取</Option>
                <Option :value="3">已删除</Option>
                <Option :value="4">已失效</Option>
              </Select>
            </FormItem>
            <FormItem class="margin-bottom-0">
              <Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Row style="margin-top: 15px">
      <Col span="24">
        <Card>
          <div>
            <Table :loading="listLoading" :columns="columnsList" :data="tableData" border disabled-hover />
          </div>
          <div class="margin-top-15" style="text-align: center">
            <Page :total="tableShow.listCount" :current="tableShow.currentPage" :page-size="tableShow.pageSize"
                  @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total />
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import { getMailInfo } from '@/api/game-mail'
import { getChoose } from '@/api/game-manager'

export default {
  name: 'operate-order',
  data () {
    return {
      nameLoading: false,
      gameNameOption: [],
      gameShow: {},
      columnsList: [
        {
          title: '序号',
          width: 65,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.tableShow.currentPage - 1) * this.tableShow.pageSize + 1)
          }
        },
        {
          title: '所属游戏',
          align: 'center',
          render: (h, params) => {
            this.getGameName()
            return h('span', this.gameShow[params.row.game_hash])
          },
          width: 150
        },
        {
          title: 'Openid',
          align: 'center',
          key: 'openid',
          minWidth: 150
        },
        {
          title: '角色',
          align: 'center',
          key: 'hero_id',
          minWidth: 50,
          render: (h, params) => {
            if (params.row.hero_id === 1001) {
              // return h('span', '驭剑者')
            } else if (params.row.hero_id === 1002) {
              return h('span', '剑影（狐狸）')
            } else if (params.row.hero_id === 1004) {
              return h('span', '炎刃（狼）')
            } else if (params.row.hero_id === 1005) {
              return h('span', '灵剑师（虎）')
            } else if (params.row.hero_id === 1006) {
              return h('span', '双弩游侠（猞猁）')
            }
          }
        },
        {
          title: '发送人',
          align: 'center',
          key: 'send',
          minWidth: 50
        },
        {
          title: '邮箱标题',
          align: 'center',
          key: 'title',
          minWidth: 80
        },
        {
          title: '邮箱描述',
          align: 'center',
          key: 'info',
          minWidth: 200,
          render: (h, params) => {
            return h('Tooltip', {
              props: {
                content: params.row.info, // tooltip提示框内容
                transfer: true, // 防止最后一行被挡住
                maxWidth: 200 // 最大宽度（tooltip的宽度）
              }
            }, [
              h('span', {
                style: {
                  display: 'inline-block',
                  width: '200px', // 设置table表格显示内容的宽度，（不设置会全部显示，没有省略号）
                  overflow: 'hidden',
                  textOverflow: 'ellipsis', // 设置省略号
                  whiteSpace: 'nowrap'// 设置不换行（如果不设置默认换行，那么不会显示省略号）
                },
                domProps: { title: params.row.info } // 如果不要tooltip提示，可以加这个提示

              }, params.row.info)
            ])
          }
        },
        {
          title: '邮箱附件',
          align: 'center',
          key: 'reward',
          minWidth: 100,
          render: (h, params) => {
            return h('Tooltip', {
              props: {
                content: params.row.reward, // tooltip提示框内容
                transfer: true, // 防止最后一行被挡住
                maxWidth: 200 // 最大宽度（tooltip的宽度）
              }
            }, [
              h('span', {
                style: {
                  display: 'inline-block',
                  width: '200px', // 设置table表格显示内容的宽度，（不设置会全部显示，没有省略号）
                  overflow: 'hidden',
                  textOverflow: 'ellipsis', // 设置省略号
                  whiteSpace: 'nowrap'// 设置不换行（如果不设置默认换行，那么不会显示省略号）
                },
                domProps: { title: params.row.reward } // 如果不要tooltip提示，可以加这个提示

              }, params.row.reward)
            ])
          }
        },
        {
          title: '邮件发送时间',
          align: 'center',
          key: 'created_at',
          minWidth: 100
        },
        {
          title: '邮箱状态',
          align: 'center',
          key: 'status',
          minWidth: 30,
          render: (h, params) => {
            if (params.row.status === 1) {
              return h('Tag', {
                attrs: {
                  color: 'blue'
                }
              }, '未收取')
            } else if (params.row.status === 2) {
              return h('Tag', {
                attrs: {
                  color: 'green'
                }
              }, '已收取')
            } else if (params.row.status === 3) {
              return h('Tag', {
                attrs: {
                  color: 'red'
                }
              }, '已删除')
            } else if (params.row.status === 4) {
              return h('Tag', {
                attrs: {
                  color: 'yellow'
                }
              }, '已失效')
            }
          }
        }
      ],
      tableData: [],
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        game_hash: '',
        open_id: '',
        hero_id: '',
        keyword: '',
        status: ''
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      buttonShow: {
        edit: true
      },
      listLoading: false,
      total: {},
      userInfo: {}
    }
  },
  created () {
    let vm = this
    vm.getGameName()
  },
  methods: {
    getGameName (value) {
      if (!this.gameNameOption.length) {
        getChoose({
          keyword: value
        }).then(response => {
          this.gameNameOption = response.data.data.list
          this.gameNameOption.forEach(i => {
            this.gameShow[i.value] = i.label
          })
        })
      }
    },
    changePage (page) {
      this.tableShow.currentPage = page
      this.getList()
    },
    changeSize (size) {
      this.tableShow.pageSize = size
      this.getList()
    },
    search () {
      this.tableShow.currentPage = 1
      // 如果输入条件但是没有选择游戏，提示先选择游戏
      if (this.searchConf.open_id !== '' || this.searchConf.hero_id !== '' || this.searchConf.status !== '' || this.searchConf.keyword !== '') {
        if (this.searchConf.game_hash === '' || this.searchConf.game_hash === undefined) {
          this.$Message.error('请先选择游戏!')
          return
        }
      }
      var val = Object.values(this.searchConf).filter(i => i !== '')
      if (val.length !== 0) {
        this.getList()
      } else {
        this.$Message.error('请先输入搜索条件!')
      }
    },
    getList () {
      let vm = this
      let params = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize,
        ...vm.searchConf
      }
      vm.listLoading = true
      getMailInfo(params).then(response => {
        vm.tableData = response.data.data.list
        vm.total = response.data.data.total
        if (response.data.data.userInfo) {
          vm.userInfo = response.data.data.userInfo
        }
        vm.tableShow.listCount = response.data.data.count
        vm.listLoading = false
      })
    }
  }
}
</script>

<style>
    .ivu-page-item-jump-next:after,
    .ivu-page-item-jump-prev:after {
        content: "\2022\2022\2022" !important;
    }
</style>
